<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <style>
        .poi_li{
            border-bottom: 1px dashed #efefef;
        }
    </style>
</head>
<style>

</style>
<body>
<div class="layui-fluid main">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
        <form class="layui-form serch" action="{:url('admin/poi/poicommentlist')}" method="post">
        <div class="layui-form-item" style="float: left;width:100%;">
            <div class="layui-input-inline">
                <input type="text" name="poi_name" lay-verify="title" value="{if isset($where['poi_name'])}{$where['poi_name']}{/if}" autocomplete="off" placeholder="请输入poi" class="layui-input layui-btn-sm">
                <input type="hidden" name="poi_id" lay-verify="title" value="{if isset($where['poi_id'])}{$where['poi_id']}{/if}" >
            </div>
            <div class="selectPoiList layui-anim layui-anim-upbit layui-input" style="position: absolute;width: 500px;z-index: 2;top: 50px;left: 15px;display: inline-block;height:auto;display: none;">
                <dl id="selectPoiList" class="selectPoiList layui-anim layui-anim-upbit" style="padding:8px;line-height: 35px;max-height:300px;overflow:auto;display: none">
                    <dd data-id="0" class="layui-select-tips poi_li" style="color:#999">不选择poi</dd>
                </dl>
                </dl>
            </div>
            <div class="layui-input-inline">
                <div class="layui-inline">
                    <select name="is_good" lay-search="" class="layui-select">
                        <option value="">是否精选</option>
                        <option value="1" {if isset($where['is_good']) && $where['is_good']==1}selected{/if}>精选</option>
                        <option value="0" {if isset($where['is_good']) && $where['is_good']==0}selected{/if}>普通</option>
                    </select>
                </div>
            </div>
            <div class="layui-input-inline">
                <div class="layui-inline">
                    <select name="is_top" lay-search="" class="layui-select">
                        <option value="">是否置顶</option>
                        <option value="1" {if isset($where['is_top']) && $where['is_top']==1}selected{/if}>置顶</option>
                        <option value="0" {if isset($where['is_top']) && $where['is_top']==0}selected{/if}>普通</option>
                    </select>
                </div>
            </div>
            <div class="layui-input-inline">
                <div class="layui-inline">
                    <select name="is_show" lay-search="" class="layui-select">
                        <option value="">是否显示</option>
                        <option value="1" {if isset($where['is_show']) && $where['is_show']==1}selected{/if}>显示</option>
                        <option value="0" {if isset($where['is_show']) && $where['is_show']==0}selected{/if}>隐藏</option>
                    </select>
                </div>
            </div>
            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-submit="" lay-filter="serch" style="margin-left:-5px;">提交</button>
            <button name="reset" value="1" class="layui-btn layui-btn-danger layui-btn-sm" lay-submit="" lay-filter="serch" style="margin-left:5px;">重置</button>
            <a href="{:url('admin/poi/virtualcomment')}" class="layui-btn layui-btn-sm addcomment">
                新增虚拟评论
            </a>
        </div>
        </form>
    </fieldset>

    <table class="layui-table" lay-even="" lay-skin="line" >
        <colgroup>
            <col width="5%">
            <col width="7%">
            <col width="5%">
            <col width="10%">
            <col width="15%">
            <col width="20%">
            <col width="5%">
            <col width="5%">
            <!--<col width="5%">-->
            <col width="8%">
            <col width="5%">
            <col width="5%">
            <col width="5%">
            <col width="5%">
        </colgroup>
        <thead>

        <tr >
            <th>ID</th>
            <th>用户昵称</th>
            <th>匿名</th>
            <th>poi</th>
            <th>评论内容</th>
            <th>图片</th>
            <th >来源</th>
            <th>评分</th>
            <!--<th >ip</th>-->
            <th >发布时间</th>
            <th >是否精选</th>
            <th >是否置顶</th>
            <th >是否显示</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        {volist name="data" id="vo"}
        <tr>
            <td>{$vo.comment_id}</td>
            <td><strong>{if empty($vo['username'])}无{else}{$vo.username}{/if}</strong></td>
            <td><strong>{if $vo['is_anonymous']==1}匿名{else}否{/if}</strong></td>
            <td>{$vo.poi_name}</td>
            <td>{$vo.content}</td>
            <td>
                {if !empty($vo.content_img)}
                {volist name="vo.content_img" id="img"}
                <img src="{$img}" alt="">
                {/volist}
                {/if}
            </td>
            <td>{if $vo.from=='wxsoft'}小程序{elseif $vo.from=='admin'}后台{else}其他{/if}</td>
            <td>{$vo.score}</td>
            <!--<td>{$vo.ip}</td>-->
            <td>{$vo.create_at}</td>
            <!--<td>-->
                <!--<form class="layui-form" action="">-->
                    <!--<div class="layui-form-item">-->
                        <!--<div class="layui-input-block" style="margin:10px">-->
                            <!--<input type="checkbox" name="anonymous" value="1" id="{$vo.comment_id}" lay-filter="anonymousComment" lay-skin="switch" <?php if($vo['is_anonymous']==1){ echo 'checked';} ?> lay-text=" 匿名|正常">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</form>-->
            <!--</td>-->
            <td>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin:10px">
                            <input type="checkbox" name="show" value="1" id="{$vo.comment_id}" lay-filter="goodComment" lay-skin="switch" <?php if($vo['is_good']==1){ echo 'checked';} ?> lay-text=" 精选|普通">
                        </div>
                    </div>
                </form>
            </td>
            <td>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin:10px">
                            <input type="checkbox" name="top" value="1" id="{$vo.comment_id}" lay-filter="topComment" lay-skin="switch" <?php if($vo['is_top']==1){ echo 'checked';} ?> lay-text=" 置顶|普通">
                        </div>
                    </div>
                </form>
            </td>
            <td>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin:10px">
                            <input type="checkbox" name="show" value="1" id="{$vo.comment_id}" lay-filter="showComment" lay-skin="switch" <?php if($vo['is_show']==1){ echo 'checked';} ?> lay-text=" 显示|隐藏">
                        </div>
                    </div>
                </form>
            </td>
            <td class="operation-menu">
                <a class="layui-btn layui-btn-xs layui-btn-danger delete" data-id="{$vo.comment_id}"  style="margin-right: 0;font-size:12px;">删除</a>
            </td>
        </tr>
        {/volist}

        </tbody>
    </table>
    <div>{$list->render()}</div>

    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        layui.use('layer', function(){
            var layer = layui.layer;
            $('.addcomment').click(function(){
                var url = $(this).attr('href');
                var a = 0;
                $.ajax({
                    url:url
                    ,async:false
                    ,success:function(res){
                        if(res.code == 0) {
                            layer.msg(res.msg);
                            a = 1;
                        }
                    }
                })
                if(a === 0) {
                    layer.open({
                        type:2,
                        content:url,
                        area: ['800px', '680px'],
                        end:function(){
                            location.reload();
                        }
                    });
                }
                return false;
            })
        });
    </script>
    <script>
        var poili_show = false;
        layui.use('form', function () {
            var form = layui.form;


            form.on('switch(showComment)', function(data){
                var id= $(this).attr('id')
                var show;

                if(data.elem.checked){
                    show =1;
                }else{
                    show =0;
                }
                $.ajax({
                    url:"{:url('admin/poi/modifyShowComment')}",
                    data:{'id':id,'show':show},
                    type:'post',
                    async: false,
                    success:function(res) {

                        layer.msg(res.msg);
                        if(res.code == 200) {
                            setTimeout(function(){
                                location.reload();
                            },1500)

                        }
                    }
                })

            });
            form.on('switch(goodComment)', function(data){
                var id= $(this).attr('id')
                var good;

                if(data.elem.checked){
                    good =1;
                }else{
                    good =0;
                }
                $.ajax({
                    url:"{:url('admin/poi/modifyGoodComment')}",
                    data:{'id':id,'good':good},
                    type:'post',
                    async: false,
                    success:function(res) {

                        layer.msg(res.msg);
                        if(res.code == 200) {
                            setTimeout(function(){
                                location.reload();
                            },1500)

                        }
                    }
                })

            });
            form.on('switch(topComment)', function(data){
                var id= $(this).attr('id')
                var top;

                if(data.elem.checked){
                    top =1;
                }else{
                    top =0;
                }
                $.ajax({
                    url:"{:url('admin/poi/modifyTopComment')}",
                    data:{'id':id,'top':top},
                    type:'post',
                    async: false,
                    success:function(res) {

                        layer.msg(res.msg);
                        if(res.code == 200) {
                            setTimeout(function(){
                                location.reload();
                            },1500)

                        }
                    }
                })

            });
            form.on('switch(anonymousComment)', function(data){
                var id= $(this).attr('id')
                var anonymous;

                if(data.elem.checked){
                    anonymous =1;
                }else{
                    anonymous =0;
                }
                $.ajax({
                    url:"{:url('admin/poi/modifyAnonymousComment')}",
                    data:{'id':id,'anonymous':anonymous},
                    type:'post',
                    async: false,
                    success:function(res) {

                        layer.msg(res.msg);
                        if(res.code == 200) {
                            setTimeout(function(){
                                location.reload();
                            },1500)

                        }
                    }
                })

            });
            form.on('button(addComment)', function(data){
                alert("999")

            });
        });
    </script>
    <script type="text/javascript">
        //初始化poi列表
        var key = "{if isset($where['poi_name'])}{$where['poi_name']}{/if}";
        getPoiList(key);

        $('.delete').click(function(){
            var id = $(this).attr('data-id');
            layer.confirm('确定要删除?', function(index) {
                $.ajax({
                    url:"{:url('admin/poi/delPoiComment')}",
                    type:"post",
                    data:{id:id},
                    success:function(res) {
                        layer.msg(res.msg);
                        if(res.code == 200) {
                            setTimeout(function(){
                                location.reload();
                            },1500)
                        }
                    }
                })
            })
        })

        $("input[name=poi_name]").focus(function(){
            poili_show = true;
            $(".selectPoiList").show();
        })
        $('input[name=poi_name]').bind('input propertychange', function() {
            //进行相关操作
            var key = $(this).val();
            $("input[name=poi_id]").val(0);
            getPoiList(key)
        });
        console.log($("#selectPoiList dd").not(":first"));
        function getPoiList(key)
        {
            $.post("/admin/poi/searchPoi",{key:key},function(data){
                var list = data.data;
                if(list.length>0){
                    $("#selectPoiList dd").not(":first").remove();
                    var str = "";
                    $.each(list,function(i,v){
                        str += "<dd class='poi_li' data-id='"+v.id+"'>"+v.name+"</dd>";
                    })
                    $("#selectPoiList").append(str);
                }
            },'json')
        }
        $(document).on("click",'.poi_li',function(){
            var content= $(this).text();
            var id= $(this).attr('data-id');
            $('input[name=poi_id]').val(id)
            if(id==0){
                $('input[name=poi_name]').val('')
            }else{
                $('input[name=poi_name]').val(content)
            }
            poili_show = false;
            $(".selectPoiList").hide();
        })

        $(document).mouseup(function(e){
            if(poili_show){
                var _con = $('.poi_li,input[name=poi_name]');   // 设置目标区域
                if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
                    $(".selectPoiList").hide();
                }
            }
            var search_id = $("input[name=poi_id]").val();
            if(search_id=='' || search_id==0 || search_id==undefined){
                $("input[name=poi_name]").val('');
            }

        });
    </script>

</body>
</html>
